<template>
    <div class="container-announ-auth">
        <a-modal width="1300px" :visible="visible" title="信息详情" @cancel="closeModal" class="yuan-modal CGZHDetail-edit"
            :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="loading">
                <div class="yuan-form">
                    <a-form-model layout="inline" class="yuan-form" ref="form" :model="formData" :rules="rules"
                        :label-col="{ style: { width: '120px' } }" :wrapper-col="{ style: { width: 'calc(100% - 120px)' } }">

                        <div class="form-panel">
                            <div class="form-title">技术转让信息公示</div>
                            <div class="form-panel-box">
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="成果名称" prop="">
                                    <span class="yuan-form-input">{{rowInfo.achievementName}}</span>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="成果类型" prop="">
                                    <span class="yuan-form-input">{{rowInfo.achievementCategory}}</span>
                                </a-form-model-item>
                                <div></div>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="编号" prop="number">
                                    <a-input class="yuan-form-input" v-model="formData.number" placeholder="请输入"></a-input>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="发布时间" prop="publicityTime">
                                    <a-date-picker class="yuan-form-input" placeholder="发布时间" v-model="formData.publicityTime"
                                        inputReadOnly valueFormat="YYYY-MM-DD" />
                                </a-form-model-item>

                                <div class="small-row-box">
                                    <div class="small-row-title">（一）技术信息</div>
                                </div>

                                <div class="clear-both"></div>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="成果识别号"
                                    prop="achievementIdentifyNumber">
                                    <a-input class="yuan-form-input" v-model="formData.achievementIdentifyNumber"
                                        placeholder="请输入"></a-input>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="拟交易价格" prop="bargainPrice">
                                    <a-input class="yuan-form-input" v-model="formData.bargainPrice" placeholder="请输入"></a-input>
                                </a-form-model-item>
                                <a-form-model-item class="yuan-form-item yuan-form-col3" label="大写金额" prop="amountInWords">
                                    <a-input class="yuan-form-input" v-model="formData.amountInWords" placeholder="请输入"></a-input>
                                </a-form-model-item>
                                <div class="small-row-box">
                                    <div class="small-row-title">（二）</div>
                                    <a-form-model-item class="yuan-form-item yuan-form-col3" label="转让方" prop="transferor">
                                        <a-input class="yuan-form-input" v-model="formData.transferor"
                                            placeholder="请输入"></a-input>
                                    </a-form-model-item>

                                </div>
                                <div class="small-row-box">
                                    <div class="small-row-title">（三）</div>
                                    <a-form-model-item class="yuan-form-item yuan-form-col3" label="受让方：" prop="transferee">
                                        <a-input class="yuan-form-input" v-model="formData.transferee"
                                            placeholder="请输入"></a-input>
                                    </a-form-model-item>

                                </div>
                                <div class="small-row-box">
                                    <div class="small-row-title">（四）</div>
                                    <a-form-model-item class="yuan-form-item yuan-form-col3" label="定价方式：" prop="typeOfPricing">
                                        <a-input class="yuan-form-input" v-model="formData.typeOfPricing"
                                            placeholder="请输入"></a-input>
                                    </a-form-model-item>

                                </div>
                                <div class="small-row-box">
                                    <div class="small-row-title">（五）</div>
                                    <a-form-model-item class="yuan-form-item yuan-form-col3" label="重要贡献人：" prop="contributory">
                                        <a-input class="yuan-form-input" v-model="formData.contributory"
                                            placeholder="请输入"></a-input>
                                    </a-form-model-item>

                                </div>
                                <div class="small-row-box">
                                    <div class="small-row-title">（六）</div>
                                    <a-form-model-item class="yuan-form-item yuan-form-col3" label="技术经纪人："
                                        prop="transferTechnologyBrokerInfo">

                                        <a-select style="width:200px" class="yuan-form-input" mode="multiple"
                                            v-model="formData.transferTechnologyBrokerArr" placeholder="请选择技术经纪人">
                                            <a-select-option v-for="item in brokerList" :key="item.technicalPhone"
                                                :value="item.technicalRepresentative+'_'+item.technicalPhone">
                                                {{item.technicalRepresentative}} {{item.technicalPhone}}
                                            </a-select-option>
                                        </a-select>
                                    </a-form-model-item>

                                </div>

                                <a-form-model-item class="yuan-form-item yuan-form-col5" label="公示时间" prop="transferPublicity">
                                    <a-range-picker class="yuan-form-input" :placeholder="['开始日期','结束日期']"
                                        :format="['YYYY-MM-DD','YYYY-MM-DD']" v-model="formData.transferPublicity" />
                                    <span class="c-danger" v-if="formData.transferPublicity">
                                        公示期：{{getDayNum('transferPublicity')}}天</span>
                                </a-form-model-item>

                            </div>
                        </div>
                    </a-form-model>
                </div>
            </a-spin>

            <template slot="footer">
                <a-button @click="save(1)" type="primary" :loading="loading">
                    保存
                </a-button>
                <a-button @click="save(2)" type="danger">
                    保存并公示
                </a-button>
                <a-button @click="closeModal">
                    取消
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import api from "@/api/api";
import moment from "moment";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
@Component({
    name: "dom",
    components: {},
})
export default class index extends Vue {
    @Prop({ default: false }) visible!: boolean;
    @Prop({ default: {} }) rowInfo!: any;

    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.formData = {};
            this.getDetailInfo();
        }
    }

    formData: any = {};
    loading = false;
    rules = {
        number: [{ required: true, message: "请输入编号", trigger: "change" }],
        publicityTime: [{ required: true, message: "请选择时间", trigger: "change" }],
        transferPublicity: [{ required: true, message: "请选择时间", trigger: "change" }],
        achievementIdentifyNumber: [{ required: true, message: "请输入", trigger: "change" }],
        bargainPrice: [{ required: true, message: "请输入", trigger: "change" }],
        amountInWords: [{ required: true, message: "请输入", trigger: "change" }],
        transferor: [{ required: true, message: "请输入", trigger: "change" }],
        transferee: [{ required: true, message: "请输入", trigger: "change" }],
        typeOfPricing: [{ required: true, message: "请输入", trigger: "change" }],
    };
    async mounted() {}
    closeModal() {
        this.$emit("closeModal");
    }
    async modalOk() {
        this.loading = true;
        try {
            // const res = await warningApi.planAdd(this.sureInfo);
            // this.$message.success(res.msg);
            this.closeModal();
        } finally {
            this.loading = false;
        }
    }
    save(formulaAuditState) {
        (this.$refs.form as any).validate(async (valid: boolean) => {
            if (!valid) return;

            const transferTechnologyBrokerInfo: any[] = [];
            this.formData.transferTechnologyBrokerArr.forEach((sbroker) => {
                const find = this.brokerList.find((broker) => {
                    return sbroker === broker.technicalRepresentative + "_" + broker.technicalPhone;
                });
                if (find) {
                    transferTechnologyBrokerInfo.push(find);
                }
            });
            const data = {
                ...this.formData,
                id: this.rowInfo.id,
                formulaAuditState,
                transferTechnologyBrokerInfo,
                publicityType: "CGZH",
                transferPublicityBeginTime: this.formData.transferPublicity[0].format("YYYY-MM-DD"),
                transferPublicityEndTime: this.formData.transferPublicity[1].format("YYYY-MM-DD"),
            };

            const res = await api.addFormulaInfo(data);
            this.$message.success("保存成功");
            this.closeModal();
            this.$emit("resetList");
        });
    }

    detailInfo: any = {};
    brokerList: any[] = [];
    async getDetailInfo() {
        this.brokerList = [];
        this.loading = true;
        try {
            const res = await api.getAnMentList({ id: this.rowInfo.id,publicityType: "CGZH", });
            const brokerObj = {};
            const recordList = res.data.auditData?.recordList || [];
            recordList.forEach((item) => {
                const artisanBrokerInfo = item.artisanBrokerInfo || "";
                if (artisanBrokerInfo) {
                    const artisanBrokerArr = JSON.parse(artisanBrokerInfo);
                    artisanBrokerArr.forEach((broker) => {
                        if (brokerObj[broker.technicalPhone]) {
                            //
                        } else {
                            brokerObj[broker.technicalPhone] = true;
                            this.brokerList.push(broker);
                        }
                    });
                }
            });
            const transferPublicity = [
                moment(res.data.auditData.transferPublicityBeginTime) ,
                moment(res.data.auditData.transferPublicityEndTime),
            ];
            let transferTechnologyBrokerArr = [];
            if (res.data.auditData.transferTechnologyBrokerInfo.length > 0) {
                transferTechnologyBrokerArr = res.data.auditData.transferTechnologyBrokerInfo.map((item) => {
                    return item.technicalRepresentative + "_" + item.technicalPhone;
                });
            }
            this.formData = { ...res.data.auditData, transferPublicity, transferTechnologyBrokerArr };
        } finally {
            this.loading = false;
        }
    }

    getDayNum(key: string) {
        if (!this.formData[key]) return "";
        const startTime = new Date(this.formData[key][0]).getTime();
        const endTime = new Date(this.formData[key][1]).getTime();
        const day = (endTime - startTime) / (24 * 60 * 60 * 1000);
        return Math.ceil(day);
    }
}
</script>

<style lang="scss">
.CGZHDetail-edit {
    .small-title {
        font-weight: bold;
        font-size: 14px;
        color: #333333;
        margin-top: 20px;
    }
    .small-row-box {
        display: flex;
    }
    .small-row-title {
        color: #333;
        font-weight: bold;
        font-size: 14px;
        line-height: 40px;
    }
}
</style>
